<!--
  停车场表列表管理页面
  User: YanZengBao
  Date: 2020-02-19
-->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" lang="zh">
<head>
    <meta charset="utf-8"/>
    <title>停车场列表</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <meta content="" name="停车场表后台服务中心"/>
    <meta content="" name="GaoXiang"/>
</head>

<body class="page-content-white  fade-in-up">

<!-- BEGIN CONTAINER -->
<div class="page-container">


    <!-- BEGIN PAGE TOOLS-->
    <!--查询条件示例 使用时取消hide样式-->
    <div class="portlet light">
        <div class="portlet-title">
            <div class="caption">
                <i class="icon-paper-plane font-green-haze"></i>
                <span class="caption-subject bold font-green-haze uppercase">搜索</span>
                <span class="caption-helper">点击右侧搜索按钮开始检索</span>
            </div>
            <div class="tools">
                <a href="javascript:void(0);" class="collapse" data-original-title="收起" title="收起"></a>
                <a href="javascript:void(0);" class="fullscreen" data-original-title="全屏" title="全屏"></a>
            </div>
        </div>
        <div class="portlet-body">
            <div class="form-inline" role="form" id="table-param-park">

                <div class="form-group form-md-line-input has-success">
                    <input type="text" class="form-control" name="name" value="" placeholder="停车场名称">
                    <div class="form-control-focus"></div>
                </div>

                <button class="btn btn-success" onclick="searchPark()"><i class="icon-magnifier"></i> 搜索</button>
                <button class="btn yellow "  onclick="reshParkList()"><i class="icon-reload"></i> 重置 </button>
            </div>
        </div>
    </div>
    <!-- END PAGE TOOLS-->

    <!-- BEGIN PAGE TABLE-->
    <div class="portlet light">
        <div class="portlet-title">
            <div class="caption">
                <i class="icon-speech  font-blue-hoki"></i>
                <span class="caption-subject font-blue-hoki">停车场数据表</span>
                <!-- 隐藏域 设置管理员ID-->
                <input type="hidden" class="form-control" id="parkManagerId" th:value="${parkManagerId}">
            </div>

            <div class="tools">
                <a href="" class="collapse" data-original-title="" title=""> </a>
                <a href="" class="fullscreen" data-original-title="" title=""> </a>
            </div>
        </div>

        <div class="table-toolbar">
            <div class="row">
                <div class="col-md-6">
                    <div class="btn-group">
                        <a href="javascript:quickBindPark();" class="btn blue ">
                            绑定停车场 <i class="fa fa-plus"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="portlet-body table-responsive">
            <div class="table-scrollable">
                <table class="table table-bordered table-hover" id="table_2">
                    <thead>
                    <tr>
                        <th class="table-checkbox">
                            <label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
                                <input type="checkbox" class="checkbox-all" title="全选"><span></span>
                            </label>
                        </th>
                        <th>停车场编号</th>
                        <th>停车场名称</th>
                        <th>车位总数</th>
                        <th>剩余车位数</th>
                        <th>省</th>
                        <th>市</th>
                        <th>区/县</th>
                        <th>详细地址</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="data,iterStat : ${parkList}">
                        <td class="center">
                            <label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
                                <input type="checkbox" class="checkbox-child"
                                       title="选择此条数据" th:value="${data['id']}"><span></span>
                            </label>
                        </td>
                        <td th:title="${data['number']}" th:text="${#strings.abbreviate(data['number'],32)}"></td>
                        <td th:title="${data['name']}" th:text="${#strings.abbreviate(data['name'],10)}"></td>
                        <td th:title="${data['parkinglotTotal']}" th:text="${data['parkinglotTotal']}"></td>
                        <td th:title="${data['parkinglotSurplus']}" th:text="${data['parkinglotSurplus']}"></td>
                        <td th:title="${data['province']}" th:text="${#strings.abbreviate(data['province'],10)}"></td>
                        <td th:title="${data['city']}" th:text="${#strings.abbreviate(data['city'],10)}"></td>
                        <td th:title="${data['county']}" th:text="${#strings.abbreviate(data['county'],10)}"></td>
                        <td th:title="${data['address']}" th:text="${#strings.abbreviate(data['address'],15)}"></td>
                    </tr>
                    </tbody>
                </table>
            </div>

        </div>
    </div>
    <!-- END PAGE TABLE-->
</div>
<!-- END CONTAINER -->

<script>

    $(document).ready(function () {
        //初始化绑定操作
        initChoose();
    });


    //搜索
    function searchPark() {
        let param = tools.formParams("table-param-park");
        tools.post("/park/chooseParkByParm", param, function (data) {
            $("#table_2").find("tbody").empty();
            for (var i = 0; i<data.data.length ; i++){
                var park = data.data[i];
                var _tr = "<tr>";
                _tr += "<td class=\"center\">\n"
                _tr +="<label class=\"mt-checkbox mt-checkbox-single mt-checkbox-outline\">"
                _tr +="<input type=\"checkbox\" class=\"checkbox-child\" title=\"选择此条数据\" value=\""+park.id+"\">" + "<span></span>"
                _tr +="</label>"
                _tr +="</td>"
                _tr +="<td title=\""+park.number+ "\" >" + park.number + "</td>"
                _tr +="<td title=\""+park.name+ "\" >" + park.name + "</td>"
                _tr +="<td title=\""+park.parkinglotTotal+ "\" >" + park.parkinglotTotal + "</td>"
                _tr +="<td title=\""+park.parkinglotSurplus+ "\" >" + park.parkinglotSurplus + "</td>"
                _tr +="<td title=\""+park.province+ "\" >" + park.province + "</td>"
                _tr +="<td title=\""+park.city+ "\" >" + park.city + "</td>"
                _tr +="<td title=\""+park.county+ "\" >" + park.county + "</td>"
                _tr +="<td title=\""+park.address+ "\" >" + park.address + "</td>"
                _tr += "</tr>"
                $("#table_2").find("tbody").append(_tr);
            }
        })
    }

    /**
     * 描述： 重置
     * 创建时间：2020/5/12  YanZengBao
     * 修改时间：2020/5/12  YanZengBao 加注释
     * 修改时间：
     */
    function reshParkList() {
        tools.post("/park/chooseParkByParm", null, function (data) {
            $("#table_2").find("tbody").empty();
            for (var i = 0; i<data.data.length ; i++){
                var park = data.data[i];
                var _tr = "<tr>";
                _tr += "<td class=\"center\">\n"
                _tr +="<label class=\"mt-checkbox mt-checkbox-single mt-checkbox-outline\">"
                _tr +="<input type=\"checkbox\" class=\"checkbox-child\" title=\"选择此条数据\" value=\""+park.id+"\">" + "<span></span>"
                _tr +="</label>"
                _tr +="</td>"
                _tr +="<td title=\""+park.number+ "\" >" + park.number + "</td>"
                _tr +="<td title=\""+park.name+ "\" >" + park.name + "</td>"
                _tr +="<td title=\""+park.parkinglotTotal+ "\" >" + park.parkinglotTotal + "</td>"
                _tr +="<td title=\""+park.parkinglotSurplus+ "\" >" + park.parkinglotSurplus + "</td>"
                _tr +="<td title=\""+park.province+ "\" >" + park.province + "</td>"
                _tr +="<td title=\""+park.city+ "\" >" + park.city + "</td>"
                _tr +="<td title=\""+park.county+ "\" >" + park.county + "</td>"
                _tr +="<td title=\""+park.address+ "\" >" + park.address + "</td>"
                _tr += "</tr>"
                $("#table_2").find("tbody").append(_tr);
            }
        })
    }

    /**
     * 描述： 绑定停车场
     * 创建时间：2020/5/12  YanZengBao
     * 修改时间：2020/5/12  YanZengBao 加注释
     * 修改时间：
     */
    function quickBindPark(){
        let parkManagerId = $("#parkManagerId").val();
        let ids = getIds($('#table_2').find(".checkbox-child:checked"));
        if(ids.length === 0 ){
            layer.msg("请至少选择一个停车场", {icon: 2, time: 1000});
            return;
        }
        layer.confirm("确定绑定选中信息么？",function(){
            tools.post("/accountInfo/bindParkBatch",{"ids":ids.join(","),"parkManagerId":parkManagerId},function(data){
                if(data.success){
                    layer.msg(data.message, {icon: 1,time:1000},function(){
                        window.location.reload();
                    });
                }else{
                    tools.errorTip(data);
                }
            });
        });
    }


    /**
     * 初始化绑定操作
     */
    function initChoose() {
        let table = $('#table_2');
        //全选
        $(".checkbox-all").click(function () {
            let group = $(this);
            table.find(".checkbox-child").each(function () {
                let isCheck = group.is(":checked");
                $(this).prop('checked', isCheck);
                isCheck ? $(this).parents('tr').addClass("active") : $(this).parents('tr').removeClass("active");
            });
        });

        //选择一行
        $(".checkbox-child").click(function () {
            let isCheck = $(this).is(":checked");
            isCheck ? $(this).parents('tr').addClass("active") : $(this).parents('tr').removeClass("active");
        });

        //点击每一行空白处 标记 table-notr class 的表格不加载此点击事件
        if(!table.hasClass("table-notr")){
            table.find("tbody tr").click(function (e) {
                let targetElement = e.target.nodeName;
                //如果是checkbook标签 则不执行以下内容（和自身点击事件冲突）
                if (!(targetElement === "SPAN\nINPUT")) {
                    let checkbox = $(this).find(".checkbox-child").eq(0);
                    let isCheck = checkbox.is(":checked");
                    if (isCheck) {
                        checkbox.prop('checked', false);
                        $(this).removeClass("active");
                    } else {
                        checkbox.prop('checked', true);
                        $(this).addClass("active");
                    }
                }
            });
        }
    }

</script>
</body>
</html>